<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅点修改</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/richScan.css">
    <style type="text/css">
        a {
            text-decoration: none;
            color: blue;
            outline: 0 none;
        }

        .Spinner {
            display: block;
            overflow: hidden;
            width: 100px;
            margin: 0 auto 15px auto;
        }

        .Spinner .Amount {
            width: 26px;
            height: 17px;
            padding: 4px 5px;
            font-weight: bold;
            line-height: 17px;
            border-width: 1px 0;
            border-style: solid;
            border-color: #d9d9d9;
            float: left;
            text-align: center;
            font-size: 16px;
            color: #565656;
            outline: 0;
        }

        .Spinner a {
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 1px solid #d9d9d9;
            background-color: #f7f7f7;
            float: left;
            cursor: pointer;
            outline: 0;
        }

        .Spinner a i {
            font-style: normal;
            background: url(images/BuynBtn.png) no-repeat;
            display: block;
            width: 9px;
            height: 9px;
            margin: 8px;
            text-indent: 999999%;
            overflow: hidden;
        }

        .Spinner .Decrease i {
            background-position: -9px -9px;
        }

        .Spinner .Increase i {
            background-position: -9px -0px;
        }

        .Spinner .DisDe i {
            background-position: -0px -9px;
        }

        .Spinner .DisIn i {
            background-position: -0px -0px;
        }
    </style>

</head>
<body>
<!-- 	<div class="header-box"> -->
<!-- 		<p id="titlename">扫描借阅</p> -->
<!-- 	</div> -->
<div class="back_title">
    <div class="back_title_box">
        <span><img src="img/scanRead/tishi@2x.png"><font
                style="color: #666666;font-size: 0.26rem;">因批量耗时较长，一次最多只能修改20本</font></span>
        <span id="spanTip" style="margin: 15px;float: left;"></span>
        <span id="spanDel" style="margin: 15px;float: right;">
<!-- 			<a href="#" class="back_select" >删除</a> -->
            <!-- 			<a class="Decrease reduc" href="javascript:void(0)">删除</a> -->
			<button> &nbsp;删除&nbsp; </button>
			</span>
        <br>

        <div>
            <select id="allplace" style="width: 98%;">

            </select>
        </div>

        <div class="back_list">
            <div class="back_list_box">
                <ul id="back_list_box">
                </ul>
            </div>
        </div>
    </div>
</div>


<div class="footer_kb1">
</div>

<div class="chose_back" id="replaceDiv">
    <div class="chose_back_box" id="chose_back_box">
        <a id="rich_scan" style="width: 100%"> <img
                src="img/scanRead/saomiao(1)@2x.png"> 扫描
        </a>
    </div>

    <div class="chose_back_box" id="chose_xia_box">
        <a id="xiajia"> 下架
        </a>
        <a class="back_select" id="replace_yes"> <img
                src="img/scanRead/fufei@2x.png"> 确认
        </a>
    </div>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/jsrender.js"></script>


<!--  {{if #cartType == replace}} -->
<!-- <li id="{{:bid}}"> -->
<!-- {{/if}} -->

<!--  {{if #cartType != replace}} -->
<!-- <li id="{{:id}}"> -->
<!-- {{/if}} -->
<!-- 借阅和续借显示购物车id， -->
<!-- 修改借阅点显示绘本bid -->
<script id="book_show_tmpl" type="text/x-jsrender">
{{if #data.book != null}}
<li bid="{{:bid}}"  id="{{:id}}">
<b class="back_active"></b>
<div class="box_con">
	<div><img src="{{:#data.book.bookImage1}}"></div>
	<div class="box_right">
		<p>{{:#data.book.bookName}}</p>
		<p>作者：{{:#data.book.author}}</p>
		<p>主题：<i>{{:#data.book.classificationName}}</i>
		</p>
		<p>适龄：<b>{{:#data.book.readMinAge}}-{{:#data.book.readMaxAge}}岁</b>
		</p>
		<p class="xingxing1">
			 {{if #data.book.evaluationStar<1}}
            <img src="img/index/xing6@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>0 && #data.book.evaluationStar<2}}
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=2 && #data.book.evaluationStar<3}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=3 && #data.book.evaluationStar<4}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=4 && #data.book.evaluationStar<5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}

            <!--<span>{{:#data.book.evaluationStar}}</span>-->
		</p>
	</div>
</div>


</li>
{{/if}}


</script>
<!-- <i class="reduc">-</i>  -->
<!-- 		<b class="num">{{:borrowWeeks}}</b>  -->
<!-- 		<i class="add">+</i> -->
<!-- 		<span>周</span> -->


<script>
    var type = getQueryString("type");

    if (type == null || type == '') {
        type = "replace";
    }

    $(document).on("click", '#back_list_box li .box_con', function () {
        var bTemp = $(this).prev("b");
        if (!bTemp.hasClass("back_active")) {
            !bTemp.attr('class', 'back_active');
        } else {
            !bTemp.removeClass('back_active');
        }
    });
    $(document).on("click", '#back_list_box li b', function () {
        var bTemp = $(this);
        if (!bTemp.hasClass("back_active")) {
            !bTemp.attr('class', 'back_active');
        } else {
            !bTemp.removeClass('back_active');
        }
    });


    /**数量减**/
    $('#back_list_box').on('click', '.reduc', function () {
        var value = parseInt($(this).siblings('.num').val());
        if (type == "borrow") {
            if (value > 0) {
                value--;
                $(this).next('.num').val(value);
                updateCart(this, value);
            } else {
// 				alert("最少借阅1周！");
            }
        } else {
            if (value > 1) {
                value--;
                $(this).next('.num').val(value);
                updateCart(this, value);
            }
        }

    });
    /**数量加**/
    $('#back_list_box').on('click', '.add', function () {
        var value = parseInt($(this).siblings('.num').val());
        debugger
        value++;
        $(this).prev('.num').val(value);
        updateCart(this, value);
    });

    // 借阅，传入购物车id集合
    $(document).on('click', '#jieyue', function () {
        var ids = [];
        var arr = $(".back_active").parents("li");
        arr.each(function (i, itme) {
            ids.push($(this).attr("id"));
        });
        window.location.href = "pay.html?ids=" + ids.join();
    });

    // 修改绘本借阅点，传入购物车id集合
    $(document).on('click', '#replace_yes', function () {
        var bids = "";
        var arr = $(".back_active").parents("li");
        arr.each(function (i, itme) {
            bids += $(this).attr("bid") + ",";
        });

        //选中的借阅点
        var pname = $("#allplace").find("option:selected").text();

        var mymess = confirm("你确认将下面选中的绘本借阅点都修改为'" + pname + "'吗?");
        if (bids.length > 0 && mymess) {
            var pid = $("#allplace").val();
            $.ajax({
                url: window.baseUrl + "/api/book/bookCart/update",
                type: "PUT",
                data: JSON.stringify({
                    bids: bids,
                    replaceId: pid
                }),
                contentType: "application/json",
                success: function (data) {
                    getCart();
                    alert("修改成功！");
                }
            });
        }
    });


    // 修改购物车
    function updateCart(t, value) {
        var id = $(t).parents("li").attr("id");
        var retailPrice = $(t).parents(".box_con_bott").find(".retailPrice").text();
        // 算出总价
        var total = parseFloat(retailPrice) * value;
        $.ajax({
            url: window.baseUrl + "/api/book/bookCart/update",
            type: "PUT",
            data: JSON.stringify({
                id: id,
                borrowWeeks: value
            }),
            contentType: "application/json",
            success: function (data) {

            }
        });
    }

    function deleteCart() {
        var ids = [];
        var arr = $(".back_active").parents("li");
        arr.each(function (i, itme) {
            ids.push($(this).attr("id"));
        });
        $.ajax({
            url: window.baseUrl + "/api/book/bookCart/deleteList",
            type: "DELETE",
            data: JSON.stringify(
                ids
            ),
            contentType: "application/json",
            success: function (data) {
                getCart();
                alert("删除成功！");
            }
        });
    }

    // 下架
    function xiajia() {
        var bids = [];
        var arr = $(".back_active").parents("li");
        arr.each(function (i, itme) {
            bids.push($(this).attr("bid"));
        });
        $.ajax({
            url: window.baseUrl + "/api/book/bookCart/xiajia",
            type: "DELETE",
            data: JSON.stringify(bids
            ),
            contentType: "application/json",
            success: function (data) {
                deleteCart();
                alert("下架成功！");
            }
        });
    }


    // 删除购物车
    $("#spanDel").click(function () {
        deleteCart();
    });
    // 续借取消
    $("#xiajia").click(function () {
        xiajia();
    });


    //转换借阅点
    if (type == "replace") {
        $("#titlename").text("设置借阅点");
        $("#borrowDiv").hide();
        $("#replaceDiv").show();
        $("#allplace").show();
        $("#spanTip").text("新借阅点");

        $.get({
            url: window.baseUrl + "/api/book/borrowPlace/findPage",
            data: {
                pageNum: 1,
                pageSize: 100
            },
            success: function (data) {
                var data = data.data.list;
                $.each(data, function (i, d) {
                    $("#allplace").append("<option value=" + d.id + ">" + d.placeName + "</option>");
                });

            }
        });
    }


    getCart();

    function getCart() {
        var userId = getUserId();
        // 获取当前用户下面的购物车
        $.get({
            url: window.baseUrl + "/api/book/bookCart/findPage",
            data: {
                uid: userId,
                cartType: type, //'borrow',renew,
                "pageNum": 1,
                "pageSize": 20
            },
            success: function (data) {
                var data = data.data.list;
                $("#back_list_box").empty();
                var htmlOutput = $.templates("#book_show_tmpl").render(data);
                $("#back_list_box").html(htmlOutput);
            }
        });
    }

</script>


<script>
    var link = location.href;
    $.ajax({
        url: window.baseUrl + "/api/wx/createJsapiSignature",//后台给你提供的接口
        type: "Post",
        data: link,
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            wx.config({
                // 		        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                jsApiList: ['checkJsApi', 'scanQRCode']
            });
        }
    });

    wx.error(function (res) {
        alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
    });

    //点击按钮扫描二维码
    $("#rich_scan").click(function () {
        debugger
        scanQRCode();
    });

    // 	$("#scanQRCode").trigger("click");

    // 	wx.ready(function() {
    // 		scanQRCode();
    // 	});

    function scanQRCode() {
        wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                // 获得二维码中的绘本编码
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                // 				var result = "AHCN11223431"; // 当needResult 为 1 时，扫码返回的结果
                //扫描成功得到绘本code,添加到购物车中
                $.ajax({
                    url: window.baseUrl + "/api/book/bookCart/create",
                    type: "Post",
                    data: JSON.stringify({
                        "uid": getUserId(),
                        "bcode": result,
                        "cartType": type,//'borrow',
                        "borrowWeeks": 1
                    }),
                    contentType: "application/json",
                    success: function (data) {
                        var code = data.code;
                        if (code != 200) {
                            alert(data.message);
                        }
                        getCart();
                        //window.location.href = "/scanReadPlace.html";//因为我这边是扫描后有个链接，然后跳转到该页面
                    }
                });
            }

        });
    }
</script>


</html>